<template>
  <el-form :model="form" :rules="rules" ref="ruleFormRef" status-icon :label-position="labelPosition" label-width="120px"
    :inline="true" class="demo-form-inline
  ">
    <el-form-item label="平台名称">
      <el-input maxlength="50" v-model="form.name" :disabled="1" />
    </el-form-item>

    <el-form-item label="平台代码">
      <el-input maxlength="20" v-model="form.code"  :disabled="1" />
    </el-form-item>

    <el-form-item label="承建单位">
      <!-- <SelectOption :selectValue="form.buildUnit" :options="data.orgAllList" @change-value="changeValue"> </SelectOption> -->
      <popup-tree-input
        :data="data.orgAllList"
        :props="data.popupTreeProps"
        :prop="
        deptForm.parentName == null
        ? $t('message.org.top_menu')
        : form.buildUnit
        "
        :node-key="'' + deptForm.parentId"
        :current-change-handle="changeValue" :disabled="1"
      />
    </el-form-item>

    <el-form-item label="负责人" >
      <!-- <SelectOption :selectValue="form.manager" :options="data.userAllList" @change-value="changeValue1"> </SelectOption> -->
      <user-list-modal
          v-model="form.manager"
          @update:modelValue="changeValue1"
          :default-users="[]"
          :multiple="false"
          :devType="'platform'" :disabled="1"
      />
    </el-form-item>

    <el-form-item label="联系电话"   >
      <el-input maxlength="15" v-model="form.managerTel"  :disabled="1" />
    </el-form-item>

    <el-form-item label="平台级别" >
      <SelectOption :selectValue="form.level" :options="data.levelOptions" @change-value="changeValue2" :disabled="1" > </SelectOption>
    </el-form-item>

    <el-form-item label="专业类别" >
      <SelectOption :selectValue="form.subjectClass" :options="data.typeOptions" @change-value="changeValue3" :disabled="1" > </SelectOption>
    </el-form-item>

    <el-form-item label="认定机构" >
      <el-input maxlength="50" v-model="form.identifyOrg" :disabled="1" />
    </el-form-item>

    <el-form-item label="认定日期">
      <el-date-picker v-model="form.identifyDate" format="YYYY-MM-DD" type="date" placeholder="选择日期" clearable  @change="handleChangeDate" :disabled="1" />
    </el-form-item>

    <el-form-item label="平台状态" prop="baseStatus">
      <SelectOption :selectValue="form.baseStatus" :options="data.stateSelect" @change-value="changeValue4" :disabled="1" > </SelectOption>
    </el-form-item>

    <el-form-item style="width: 100%" label="平台简介" prop="briefIntroduction">
      <el-input v-model="form.briefIntroduction" maxlength="1000" :autosize="{ minRows: 3 }" type="textarea"
        placeholder="请输入" :disabled="1"  />
    </el-form-item>
  </el-form>
</template>
<script lang="ts">
import { ref, reactive, computed,watch ,onMounted} from 'vue'
import SelectOption from '@/views/science/components/selectOption/index.vue'
import { useStore } from 'vuex'
import UserListModal from '@/views/project/components/UserListModal/index.vue';
import * as proxy from "@/constants/proxy";
import request from "@/utils/request";
import PopupTreeInput from '@/views/science/components/PopupTreeInput/index.vue';
export default {
  components: {
    SelectOption,PopupTreeInput,UserListModal,
  },
  emits: {
    valueFlag: null,
  },
  setup(props, { emit }) {
    const store = useStore()
    const labelPosition = ref('right')

    const form = reactive(store.state.technologyStrength.transferForm)

    watch(form, (newValue, oldValue) => {
      console.log("form值改变了")
      store.commit('technologyStrength/gettransferForm', { ...form })
    });

    const data = reactive({
      levelOptions: computed(() => store.state.technologyStrength.kjlevelSelect),
      typeOptions: computed(() => store.state.technologyStrength.kjtypeSelect),
      stateSelect: computed(() => store.state.technologyStrength.stateSelect),
      userAllList: computed(() => store.state.technologyStrength.userAllList),
      // orgAllList: computed(() => store.state.technologyStrength.orgAllList),
      orgAllList:[],
      popupTreeProps: {
        label: 'name',
        children: 'children',
      },
    })
    const deptForm = {
      parentId: 0,
      parentName: '',
    }


    const changeValue = (item) => {
      form.buildUnit = item.name
      form.buildUnitId = item.id
    }
    const changeValue1 = (item) => {
      form.manager = item.cname
      form.managerId = item.userId
      form.managerTel = item.phone
    }
    const changeValue2 = (item) => {
      form.level = item.itemText
      form.levelId = item.itemValue
    }
    const changeValue3 = (item) => {
      form.subjectClass = item.itemText
      form.subjectClassId = item.itemValue
    }
    const changeValue4 = (item) => {
      if (item){
        form.baseStatus = item.itemText
        form.baseStatusId = item.itemValue
      }else{
        form.baseStatus = ''
        form.baseStatusId = ''
      }
    }

    const rules = reactive({
      name: [
        { required: true, message: '请输入平台名称', trigger: 'blur' },
      ],
      manager: [
        { required: true, message: '请选择负责人', trigger: 'change', },
      ],
      managerTel:[
        { required: false, message: '请输入电话号码', trigger: 'change', },
        { pattern: /^1[3456789]\d{9}$/, message: '电话号码格式不正确', trigger: 'blur' },
      ],
      level: [
        { required: true, message: '请选择平台级别', trigger: 'change', },
      ],
      subjectClass: [
        { required: true, message: '请选择专业类别', trigger: 'change', },
      ],
      // construct: [
      //   { required: true, message: '请选择建设方式', trigger: 'change' },
      // ],
      identifyOrg: [
        { required: true, message: '请输入认定机构', trigger: 'blur', },
      ],
      briefIntroduction: [
        { required: true, message: '请输入平台简介', trigger: 'blur' },
      ],
    })

    const ruleFormRef = ref()
    const submitForm = async () => {
      await ruleFormRef.value.validate((valid, fields) => {
        if (valid) {
          emit('valueFlag', true)
          console.log('submit!')
        } else {
          emit('valueFlag', false)
        }
      })
    }

    const handleChangeDate = (val) => {
      const year = val.getFullYear(); // 获取年份
      const month = (val.getMonth() + 1) < 10 ? '0' + (val.getMonth() + 1) : (val.getMonth() + 1); // 获取月份，需要加1
      const day = val.getDate() < 10 ? '0' + val.getDate() : val.getDate(); // 获取日期
      const formattedDate = `${year}-${month}-${day}`;
      form.identifyDate = formattedDate
      store.commit('technologyStrength/getForm', { ...form })
    }
    const getOrgList = () =>{
      return request({
        url: proxy.CHECC_API_CMS + "/org/getSysOrgList",
        method: "get",
      }).then(res =>{
        console.log('getOrgList',res);
        data.orgAllList = res.data.data
      })
    }
    onMounted(() =>{
      getOrgList()
    })

    return {
      labelPosition,
      data,
      form,
      rules,
      ruleFormRef,
      submitForm,
      handleChangeDate,

      changeValue,
      changeValue1,
      changeValue2,
      changeValue3,
      changeValue4,deptForm,
    }
  },
}
</script>
<style lang="scss" scoped>
.demo-form-inline .el-form-item {
  width: 48%;
}

:deep(.el-date-editor.el-input) {
  width: 100%;
}

:deep(.el-date-editor.el-input__inner) {
  width: 100%;
}

:deep(.demo-form-inline .el-select) {
  width: 100%;
  margin: 0;
}

.el-select {
  width: 100%;
  margin: 0;
}


.selectLabel {
  width: 80%;
  height: 40px;
  line-height: 40px;
  padding: 0 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  display: inline-block;
}

.addLabel {
  display: inline-block;
  width: 120px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #169BD5;
  border-radius: 6px;
  color: #fff;
  margin-left: 15px;
}
</style>
